<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css">
    body,
    ul,
    li {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    #floorNav {
      display: none;
      position: fixed;
      top: 100px;
      left: 50px;
      width: 32px;
      border: 1px solid #cecece;
    }

    #floorNav li {
      position: relative;
      width: 32px;
      height: 32px;
      border-bottom: 1px solid #cecece;
      text-align: center;
      line-height: 32px;
      font-size: 12px;
    }

    #floorNav span {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      background: red;
      color: white;
    }

    #floorNav li:hover span,
    #floorNav li.hover span {
      display: block;
    }

    #floorNav li:last-child {
      background: red;
      color: white;
      border-bottom: none;
    }

    #header,
    #footer {
      width: 1000px;
      height: 1000px;
      background: darkgoldenrod;
      margin: 0 auto;
    }

    #content li {
      width: 1000px;
      height: 600px;
      margin: 0 auto;
      font-size: 40px;
      text-align: center;
      line-height: 600px;
    }
  </style>
</head>

<body>
  <div id="floorNav">
    <ul>
      <li>1F<span>服饰</span></li>
      <li>2F<span>美妆</span></li>
      <li>3F<span>手机</span></li>
      <li>4F<span>家电</span></li>
      <li>5F<span>数码</span></li>
      <li>6F<span>运动</span></li>
      <li>7F<span>居家</span></li>
      <li>8F<span>母婴</span></li>
      <li>9F<span>食品</span></li>
      <li>10F<span>图书</span></li>
      <li>11F<span>服务</span></li>
      <li>TOP</li>
    </ul>
  </div>
  <div id="header"></div>
  <div id="content">
    <ul>
      <li style="background: #8b0000">服饰</li>
      <li style="background: #123">美妆</li>
      <li style="background: #667">手机</li>
      <li style="background: #558">家电</li>
      <li style="background: #900">数码</li>
      <li style="background: #456">运动</li>
      <li style="background: #789">居家</li>
      <li style="background: #234">母婴</li>
      <li style="background: #567">食品</li>
      <li style="background: #887">图书</li>
      <li style="background: #980">服务</li>
    </ul>
  </div>
  <div id="footer"></div>
</body>
<script src="js/jquery-1.11.0.js"></script>
<script>
  $(function () {
    $(window).scroll(function () {
      let st = $(this).scrollTop()
      if (st >= 500) {
        $("#floorNav").fadeIn()
      } else {
        $("#floorNav").fadeOut()
      }

      //遍历
      $("#content li").each(function (idx, ele) {
        if (st >= $(ele).offset().top - $(ele).outerHeight() / 2) {
          $("#floorNav li")
            .eq(idx)
            .addClass("hover")
            .siblings()
            .removeClass("hover")
        }
      });
    });

    $("#floorNav li:not(:last)").click(function () {
      let idx = $(this).index()
      $(window).scrollTop($("#content li").eq(idx).offset().top)
    });

    $("#floorNav li:last").click(function () {
      $("body,html").animate({ scrollTop: 0 }, 500)
    })

  })
</script>

</html>